<template>
  <h1>vue3未来写法</h1>
  <!-- 测试倒计时 -->
  <div class="count">
    <h2>{{ ct }}</h2>
    <button @click="start">开始倒计时</button>
    <button @click="pause">结束倒计时</button>
  </div>
  <div>
    <ul>
      <li>{{ count }}</li>
      <li @click="add">add</li>
    </ul>
  </div>
  <hr />
  <div class="box"></div>
  <XtxMessage type="error" text="出错了" />
  <!-- <Msg type="success" text="成功了！" /> -->
</template>

<script setup>
// 草案阶段=》完全移除了options api
import { ref, createVNode, render, onMounted } from 'vue'
// 导入消息组件=》导入后自动注册
import Msg from '@/components/Message/index.vue'
// 导入消息提示框方法
import Message from '@/components/Message'
// 倒入倒计时方法
import { useCountDown } from '@/hook'

onMounted(() => {
  // 1. 创建一个HTML元素
  const h1 = createVNode('h1', { class: 'red', a: 1 }, ['我是h1'])
  console.log(h1)
  // 渲染虚拟DOM
  render(h1, document.querySelector('.box'))
  // 2. 创建一个组件元素(.vue) => 传组件对象
  const msg = createVNode(Msg, { type: 'success', text: '虚拟DOM' })
  render(msg, document.querySelector('.box'))

  // 调用Message方法 打开消息提示
  Message({ type: 'success', text: 'text fn!' })
})

// 使用倒计时
// eslint-disable-next-line no-unused-vars
const { count: ct, start, pause } = useCountDown(60)

const count = ref(0)

function add () {
  count.value++
}
</script>

<style lang="less" scoped>
/deep/ .red {
  color: red;
}
</style>
